<script setup>
  import { ossImg } from "@/utils/utils";
  import { onLoad, onUnload } from "@dcloudio/uni-app";
  import { ref } from "vue";

  let timer = null

  const offsetLeft = ref(0)

  onLoad(() => {
    timer = setInterval(() => {
      if (offsetLeft.value > 40) {
        clearInterval(timer)
        timer = null
          uni.redirectTo({
            url: '/campaign/pages/AiryCakeIntroduction/index'
          })
      }
      offsetLeft.value += 15
    }, 500)
  })

  onUnload(() => {
    clearInterval(timer)
    timer = null
  })
</script>

<template>
  <view
    class="egg-loading"
    :style="{ backgroundImage: `url(${ossImg(`others/cloudsample/color_bg.png`)})`}"
  >
    <image
      class="w-340px h-294px"
      :src="ossImg('others/cloudsample/loading/loading_pic.png')"
    ></image>
    <view class="progress">
      <image
        class="progress-line"
        :src="ossImg('others/cloudsample/loading/loading_line.png')"
      ></image>
      <image
        class="loading-pointer"
        :style="{ left: `${offsetLeft}%` }"
        :src="ossImg('others/cloudsample/loading/loading_pointer.png')"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .egg-loading {
    width: 100%;
    height: 100vh;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #04BAFE;
    background-size: 375px 748px;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .progress {
      width: 226px;
      height: 22px;
      margin-top: 52px;
      position: relative;
      display: flex;
      align-items: center;
      .progress-line {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
      }
      .loading-pointer {
        width: 22px;
        height: 24px;
        position: absolute;
        left: 0;
        transition: all .3s;
      }
    }
  }
</style>
